PBA INSTITUTE

Cursor Type

In CSS, the cursor property dictates the type of cursor displayed when hovering over elements, enhancing user interaction and accessibility. It offers predefined values like pointer for links, move for draggable items, and text for editable fields. Custom cursor images can also be specified, ensuring clear visual feedback tailored to specific interactions. By selecting appropriate cursor types, developers improve usability and guide user actions effectively within web interfaces.

Here are some example of Cursur.

Example 1

														
														
<html>
<head>
<style>
.alias {
	cursor: alias;
	color: tomato;
}
.all-scroll {
	cursor: all-scroll;
	color: tomato;
}
.col-resize {
	cursor: col-resize;
	color: tomato;
}
</style>
</head>
<body>
     <h6 class="alias" align="center">alias</h6>
     <h6 class="all-scroll" align="center">all-scroll</h6>
     <h6 class="col-resize" align="center">col-resize</h6>
</body>
</html>



														
														
													

OUTPUT:

alias

all-scroll

col-resize

In this example, HTML code defines a basic webpage with a <style> section in the <head> to specify CSS classes for different cursor styles (`cursor` property). Each <h6> element in the <body> has a class corresponding to a cursor style (e.g., alias, all-scroll). When applied, these classes change the cursor appearance when hovering over the respective heading, displaying different cursor icons such as alias, all-scroll, col-resize, etc.

Example 2

														
														
<html>
<head>
<style>
.zoom-in {
	cursor: zoom-in;
	color: tomato;
}
.zoom-out {
	cursor: zoom-out;
	color: tomato;
}
</style>
</head>
<body>
	<h6 class="zoom-in" align="center">zoom-in</h6>
	<h6 class="zoom-out" align="center">zoom-out</h6>
</body>
</html>

 


														
														
													

OUTPUT:

zoom-in

zoom-out

Example 3

														
														
<html>
<head>
<style>
.move {
	cursor: move;
	color: tomato
}
.pointer {
	cursor: pointer;
	color: tomato;
}
.text {
	cursor: text;
	color: tomato;
}
.wait {
	cursor: wait;
	color: tomato;
}
</style>
</head>
<body>
	<h6 class="move" align="center">move</h6>
	<h6 class="pointer" align="center">pointer</h6>
	<h6 class="text" align="center">text</h6>
	<h6 class="wait" align="center">wait</h6>
</body>
</html>

 


														
														
													

OUTPUT:

move

pointer

text

wait

Conclusion :

In conclusion, cursor enhances user interaction by providing visual feedback and precise control on digital interfaces. It allows users to navigate, select, and interact with content efficiently. The advantage lies in its intuitive nature, making interfaces more user-friendly and accessible across different devices and platforms. Cursors also aid in enhancing productivity and usability by facilitating seamless navigation and interaction within applications and websites.

Introduction Selectors Style Sheet Insertion CSS Color CSS Backgrounds
CSS Border CSS Margin CSS Table CSS Text Fonts CSS Links Animation Button Transition Cursor Type Navbar Layout Login Page Image Slider

Cursor Type

alias

all-scroll

col-resize

zoom-in

zoom-out

move

pointer

text

wait

Conclusion :

CSS All Topics

SHARE